<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/ssss' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <!-- 搜索框 -->
        <div class="qq">
          <!-- 搜索表单 -->
          <el-input
            v-model="input1"
            placeholder="请输入内容"
            size="medium"
          ></el-input>
          <!-- 搜索按钮 -->
          <el-button style="margin-right: 50px" @click="ss">
            <i class="el-icon-search"></i>
          </el-button>
          <!-- 添加用户按钮 -->
          <el-button type="primary" @click="tjj" class="tj">添加用户</el-button>
          <!-- 添加用户按钮弹出 -->

          <el-dialog
            title="添加用户"
            :visible.sync="dialogFormVisible"
            @close="close"
          >
            <el-form :model="form" :rules="rules" ref="form">
              <el-form-item
                label="用户名"
                :label-width="formLabelWidth"
                prop="username"
              >
                <el-input v-model="form.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                label="密码"
                :label-width="formLabelWidth"
                prop="password"
              >
                <el-input v-model="form.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                label="邮箱"
                :label-width="formLabelWidth"
                prop="email"
              >
                <el-input v-model="form.email" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                label="手机"
                :label-width="formLabelWidth"
                prop="create_time"
              >
                <el-input
                  v-model="form.create_time"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="display: flex">
              <el-button @click="qxx">取 消</el-button>
              <el-button type="primary" @click="qr('form')">确 定</el-button>
            </div>
          </el-dialog>
        </div>

        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="" label="序号" width="100">
            <template slot-scope="{ $index }">
              <el-button size="small">
                {{ $index + 1 }}
              </el-button>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="username" label="姓名">
          </el-table-column>
          <el-table-column align="center" prop="email" label="邮箱">
          </el-table-column>
          <el-table-column align="center" prop="create_time" label="电话">
          </el-table-column>
          <el-table-column align="center" prop="role_name" label="角色">
          </el-table-column>
          <el-table-column align="center" prop="mg_state" label="状态">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.mg_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="zt(row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <!-- {{ row }} -->
              <!-- 查看按钮 -->
              <el-button @click="ck1(row)" type="primary" size="small">
                <i class="el-icon-edit"></i>
              </el-button>
              <el-dialog title="编辑用户" :visible.sync="ck" @close="close">
                <el-form :model="form" :rules="rules" ref="form" disabled>
                  <el-form-item
                    label="用户名"
                    :label-width="formLabelWidth"
                    prop="username"
                  >
                    <el-input
                      v-model="form.username"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <el-form :model="form" :rules="rules" ref="form">
                  <el-form-item
                    label="邮箱"
                    :label-width="formLabelWidth"
                    prop="email"
                  >
                    <el-input
                      v-model="form.email"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="手机"
                    :label-width="formLabelWidth"
                    prop="create_time"
                  >
                    <el-input
                      v-model="form.create_time"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="display: flex">
                  <el-button @click="ck = false">取 消</el-button>
                  <el-button type="primary" @click="xg(form)">确 定</el-button>
                </div>
              </el-dialog>
              <!-- 删除按钮 -->
              <el-button type="danger" size="small" @click="sc(row.id)">
                <i class="el-icon-delete"></i>
              </el-button>
              <!-- 分配按钮 -->
              <el-button type="warning" size="small" @click="fp1(row)">
                <i class="el-icon-setting"></i>
              </el-button>
              <!-- 分配按钮弹出框 -->
              <el-dialog title="分配角色" :visible.sync="fp">
                <el-form :model="form" :rules="rules" ref="form" disabled>
                  <span>当前用户:{{ row.username }}</span>
                </el-form>
                <el-form :model="form" :rules="rules" ref="form">
                  <span> 当前的角色:{{ row.role_name }} </span>
                </el-form>
                <el-form :model="form" :rules="rules" ref="form">
                  <span>
                    分配新角色：
                    <el-select
                      v-model="select"
                      slot="prepend"
                      placeholder="请选择"
                    >
                      <el-option label="管理员" value="管理员"></el-option>
                      <el-option
                        label="wqare"
                        value="wqare"
                      ></el-option> </el-select
                  ></span>
                </el-form>
                <div slot="footer" class="dialog-footer" style="display: flex">
                  <el-button @click="fp = false">取 消</el-button>
                  <el-button type="primary" @click="qx(row)">确 定</el-button>
                </div>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { huoQuLogin, shanChu, tianJia, xiuGai, xiangQin, quanXian, zhuangTai } from '@/api/user'
export default {
  name: 'UsersA',

  data () {
    var validatePass2 = (rule, value, callback) => {
      const reg = /^\d{4,}$/

      if (!reg.test(value)) {
        callback(new Error('请输入6位以上的密码'));
      }
      else {
        callback();
      }
    };
    return {
      obj: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },

      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
        ],
        create_time: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
        ]

      },
      list: [
      ],
      rid: 0,
      select: '',
      currentPage: 1,
      total: 0,
      input: '',
      fp: false,
      ck: false,
      input1: '',
      bool: true,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        username: '',
        password: '',
        email: '',
        create_time: '',
        id: 0,
        rid: 0
      },
      formLabelWidth: '120px'
    }
  },
  created () {
    this.huoQu()
  },
  computed: {
  },
  methods: {
    tjj () {
      this.dialogFormVisible = true
      this.form.username = ''
    },
    qxx () {
      this.dialogFormVisible = false
    },
    close () {
      this.form.email = '',
        this.form.create_time = ''
    },
    //添加函数
    async qr (form) {
      // this.form.username = ''
      const res = await tianJia({ username: this.form.username, password: this.form.password, email: this.form.email, mobile: this.form.create_time })
      console.log(res);

      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(valid);
          this.dialogFormVisible = false
          this.$message.success('添加成功')
          this.huoQu()
        } else {
          this.$message.error('添加失败')
          return false;
        }
      });
      this.form.username = '',
        this.form.password = '',
        this.form.email = '',
        this.form.create_time = ''
    }
    ,
    //删除函数
    async sc (id) {

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await shanChu(id)
        console.log(res),
          this.huoQu(),
          this.$message({

            type: 'success',
            message: '删除成功!',
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    ck1 (row) {
      this.ck = true
      console.log(row);
      this.form = row
    },
    // 搜索功能函数
    async ss () {
      this.obj.query = this.input1
      console.log(this.obj);
      await huoQuLogin(this.obj)
      this.huoQu()
    },
    // 修改功能函数
    async xg (x) {
      this.ck = false
      const res = await xiuGai(x)
      console.log(res);
    },
    //点击设置图标后的函数
    async fp1 (row) {
      this.fp = true
      const res = await xiangQin(row.id)
      console.log(res.data.rid);
      this.form.rid = res.data.rid
      this.form.id = res.data.id
      // if (this.select != '') {
      //   this.select === ''
      // }
    },
    //点击确认权限后的函数
    async qx () {
      try {

        if (this.select == '') {
          this.$message.error('请选择分配的角色')
        }
        else {
          // this.fp = false
          console.log(this.select);
          console.log(this.form.id, this.form.rid);
          const res = await quanXian({ id: this.form.id, rid: this.form.rid })
          console.log(res);
          this.$message.error(res.meta.msg)
        }


      } catch (error) {

      }

    },
    //状态函数
    async zt (row) {
      // console.log(row);
      try {
        const res = await zhuangTai({ bool: row.mg_state, id: row.id })
        console.log(res);
        this.$message.success(res.meta.msg)
      } catch (error) {

      }

    },
    //获取
    async huoQu () {
      const res = await huoQuLogin(this.obj)
      console.log(res);
      this.list = res.data.users
      this.total = res.data.total
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.obj.pagesize = val
      this.huoQu()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.obj.pagenum = val
      this.huoQu()
    },

  }
}
</script>
<style lang='less'  scoped>
.el-container {
  // background-color: #eaedf1;
  .el-header {
    line-height: 100%;
    .el-breadcrumb {
      line-height: 100%;
    }
  }
  .el-main {
    background-color: #fff;
  }
}
.qq {
  display: flex;
  justify-content: baseline;
  .tj {
    margin-right: 300px;
    margin-left: 50px;
  }
}
</style>
